<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>浏览备份</title>
    <link rel="shortcut icon" href="images/icon-32x32.png" type="image/png">
    <link type="text/css" rel="stylesheet" href="vendor/bulma.min.css">
    <link rel="stylesheet" href="vendor/fontawesome/css/all.min.css">
    <script src="vendor/xlsx.full.min.js"></script>
    <script src="vendor/zepto.min.js"></script>
    <style>
        .page-tab-content {
            margin-top: 3rem;
            max-width: 50rem;
        }

        .columns.images {
            width: 30rem;
        }

        .image.preview img {
            cursor: pointer;
        }

        .level.stat {
            color: #ccc;
        }

        .card .image img {
            max-width: 5rem;
        }

        .card .subtitle {
            margin-top: -0.5rem!important;
        }

        figure {
            overflow: hidden;
        }

        .pagination {
            margin-top: 3rem;
        }

        .subject-cover {
            width: 8rem;
        }

        .note .cover {
            width: 8rem;
        }

        .doulist .cover {
            width: 100px;
        }

        .doulist-item .picture img {
            width: 120px;
        }

        .is-obsolete {
            background-color: #ccc;
            padding: 1rem;
            margin-bottom: -1rem;
        }

        .status-images figure {
            margin-left: 0;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="https://doufen.org/" target="_blank">
                    <img src="images/logo-main.png" alt="豆伴" title="豆伴">
                </a>
                <a role="button" class="navbar-burger">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button" href="backup.html">
                                <span class="icon">
                                    <i class="fas fa-chevron-left"></i>
                                </span>
                                <span>返回</span>
                            </a>
                            <a class="button" name="export" title="将该用户数据导出到 Excel 文件中">
                                <span class="icon">
                                    <i class="fas fa-file-export"></i>
                                </span>
                                <span>导出数据</span>
                            </a>
                            <a class="button" name="migrate" title="将该用户数据迁移到我的豆瓣账号中">
                                <span class="icon">
                                    <i class="fas fa-exchange-alt"></i>
                                </span>
                                <span>迁移数据</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <script src="./ui/navbar.js"></script>

    <section class="section">
        <div class="container">
            <div class="tabs is-centered is-boxed">
                <ul>
                    <li class="page-tab-link is-active" data-tab="status"><a href="#status">广播</a></li>
                    <li class="page-tab-link" data-tab="interest"><a href="#interest">影/音/书/游/剧</a></li>
                    <li class="page-tab-link" data-tab="review"><a href="#review">评论</a></li>
                    <li class="page-tab-link" data-tab="annotation"><a href="#annotation">笔记</a></li>
                    <li class="page-tab-link" data-tab="note"><a href="#note">日记</a></li>
                    <li class="page-tab-link" data-tab="photo"><a href="#photo">相册</a></li>
                    <li class="page-tab-link" data-tab="follow"><a href="#follow">关注</a></li>
                    <li class="page-tab-link" data-tab="doumail"><a href="#doumail">豆邮</a></li>
                    <li class="page-tab-link" data-tab="doulist"><a href="#doulist">豆列</a></li>
                </ul>
            </div>
        </div>

        <div class="container page-tab-content is-hidden" name="status"></div>

        <div class="container page-tab-content is-hidden" name="interest">
            <div class="segments tabs is-toggle is-centered is-small">
                <ul>
                    <li>
                        <a data-type="movie" data-status="done">
                            <span class="icon is-small"><i class="fas fa-film"></i></span>
                            <span>看过</span>
                            <span class="type-name"></span>
                        </a>
                    </li>
                    <li>
                        <a data-type="movie" data-status="doing"><span>在看</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="movie" data-status="mark"><span>想看</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="music" data-status="done">
                            <span class="icon is-small"><i class="fas fa-music"></i></span>
                            <span>听过</span>
                            <span class="type-name"></span>
                        </a>
                    </li>
                    <li>
                        <a data-type="music" data-status="doing"><span>在听</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="music" data-status="mark"><span>想听</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="book" data-status="done">
                            <span class="icon is-small"><i class="fas fa-book"></i></i></span>
                            <span>读过</span>
                            <span class="type-name"></span>
                        </a>
                    </li>
                    <li>
                        <a data-type="book" data-status="doing"><span>在读</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="book" data-status="mark"><span>想读</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="game" data-status="done">
                            <span class="icon is-small"><i class="fas fa-gamepad"></i></i></span>
                            <span>玩过</span>
                            <span class="type-name"></span>
                        </a>
                    </li>
                    <li>
                        <a data-type="game" data-status="doing"><span>在玩</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="game" data-status="mark"><span>想玩</span><span class="type-name"></span></a>
                    </li>
                    <li>
                        <a data-type="drama" data-status="done">
                            <span class="icon is-small"><i class="fas fa-theater-masks"></i></i></span>
                            <span>看过</span>
                            <span class="type-name"></span>
                        </a>
                    </li>
                    <li>
                        <a data-type="drama" data-status="mark"><span>想看</span><span class="type-name"></span></a>
                    </li>
                </ul>
            </div>
            <div class="sub-container"></div>
        </div>

        <div class="container page-tab-content is-hidden" name="review">
            <div class="segments tabs is-toggle is-centered">
                <ul>
                    <li>
                        <a data-type="movie">
                            <span class="icon is-small"><i class="fas fa-film"></i></span>
                            <span>影评</span>
                        </a>
                    </li>
                    <li>
                        <a data-type="music">
                            <span class="icon is-small"><i class="fas fa-music"></i></span>
                            <span>乐评</span>
                        </a>
                    </li>
                    <li>
                        <a data-type="book">
                            <span class="icon is-small"><i class="fas fa-book"></i></span>
                            <span>书评</span>
                        </a>
                    </li>
                    <li>
                        <a data-type="drama">
                            <span class="icon is-small"><i class="fas fa-theater-masks"></i></span>
                            <span>剧评</span>
                        </a>
                    </li>
                    <li>
                        <a data-type="game">
                            <span class="icon is-small"><i class="fas fa-gamepad"></i></span>
                            <span>游戏</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sub-container"></div>
        </div>

        <div class="container page-tab-content is-hidden" name="annotation"></div>

        <div class="container page-tab-content is-hidden" name="note"></div>

        <div class="container page-tab-content is-hidden" name="photo"></div>

        <div class="container page-tab-content is-hidden" name="follow">
            <div class="segments tabs is-toggle is-centered">
                <ul>
                    <li>
                        <a data-type="following">我关注的</a>
                    </li>
                    <li>
                        <a data-type="follower">关注我的</a>
                    </li>
                    <li>
                        <a data-type="blacklist">黑名单</a>
                    </li>
                </ul>
            </div>
            <div class="sub-container"></div>
        </div>

        <div class="container page-tab-content is-hidden" name="doumail"></div>

        <div class="container page-tab-content is-hidden" name="doulist">
            <div class="segments tabs is-toggle is-centered">
                <ul>
                    <li>
                        <a data-type="owned">我创建的</a>
                    </li>
                    <li>
                        <a data-type="following">我收藏的</a>
                </ul>
            </div>
            <div class="sub-container"></div>
        </div>
    </section>

    <div class="modal" id="minor-modal">
        <div class="modal-background"></div>
        <div class="modal-content box" style="width: 800px;"></div>
        <button class="modal-close is-large"></button>
    </div>

    <div class="modal" id="picture-modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <p class="image">
                <img>
            </p>
        </div>
        <button class="modal-close is-large"></button>
    </div>
    

    <div class="modal" id="export-modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">导出数据</p>
                <button class="delete cancel"></button>
            </header>
            <section class="modal-card-body">
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <label>选择导出的项目：</label>
                        </div>
                    </div>
                    <div class="level-left">
                        <div class="level-item">
                            <label class="checkbox">
                                <input type="checkbox" class="select-all"> 全选
                            </label>
                        </div>
                    </div>
                </div>
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Interest"> 影/音/书/游/剧
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Review"> 评论
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Status"> 广播
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Following"> 关注
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Follower"> 被关注
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Blacklist"> 黑名单
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Note"> 日记
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Photo"> 相册
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Annotation"> 笔记
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Doumail"> 豆邮
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="item" value="Doulist"> 豆列
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-link" name="export">导出</button>
                <button class="button cancel">取消</button>
            </footer>
        </div>
    </div>

    <div class="modal" id="migrate-modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">迁移数据</p>
                <button class="delete cancel"></button>
            </header>
            <section class="modal-card-body">
                <div class="content">
                    <p>该功能可以将此备份数据导入到你<a href="options.html#account" target="_blank">当前登录</a>的豆瓣账号中。另外，请在<a href="https://www.douban.com/settings/" target="_blank">广播设置</a>中关闭各事件广播，以免扰邻。</p>
                </div>
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <label>选择迁移的项目：</label>
                        </div>
                    </div>
                    <div class="level-left">
                        <div class="level-item">
                            <label class="checkbox">
                                <input type="checkbox" class="select-all"> 全选
                            </label>
                        </div>
                    </div>
                </div>
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="task" value="Interest"> 影/音/书/游/剧
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="task" value="Annotation"> 笔记
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="task" value="Follow"> 关注
                                </label>
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" name="task" value="Blacklist"> 黑名单
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field is-hidden">
                            <div class="control">
                                <label class="checkbox" disabled>
                                    <input type="checkbox" name="task" value="Note" disabled> 日记
                                </label>
                            </div>
                        </div>
                        <div class="field is-hidden">
                            <div class="control">
                                <label class="checkbox" disabled>
                                    <input type="checkbox" name="task" value="Photo" disabled> 相册
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field is-hidden">
                            <div class="control">
                                <label class="checkbox" disabled>
                                    <input type="checkbox" name="task" value="Doulist" disabled> 豆列
                                </label>
                            </div>
                        </div>
                        <div class="field is-hidden">
                            <div class="control">
                                <label class="checkbox" disabled>
                                    <input type="checkbox" name="task" value="Review" disabled> 评论
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-link" name="migrate">迁移</button>
                <button class="button cancel">取消</button>
            </footer>
        </div>
    </div>

    <script type="module" src="explorer.js"></script>
</body>

</html>
